<!--  -->
<template>
	<div class="content">
		<p class="tip">为保证账号安全，需要验证已绑定手机</p>
		<div class="inner">
			<div class="line underline layout-flex-base">
				<span class="lable">登录账号</span>
				{{ phoneHandle("15013454512") }}
			</div>
			<div class="line underline layout-flex-base">
				<span class="lable">验证码</span>
				<u-input placeholder="请输入验证码" type="text"></u-input>
				<c-button height="70rpx" width="190rpx">获取验证码</c-button>
				<!-- <span class="code">获取验证码</span> -->
			</div>
			<div class="line underline layout-flex-base">
				<span class="lable">新手机号</span>
				<u-input placeholder="请输入新手机号" type="text"></u-input>
			</div>
			<div class="line underline layout-flex-base">
				<span class="lable">新手机验证码</span>
				<u-input placeholder="请输入验证码" type="text"></u-input>
				<c-button height="70rpx" width="190rpx">获取验证码</c-button>
				<!-- <span class="code">获取验证码</span> -->
			</div>
		</div>
		<div class="btn">
			<c-button height="86rpx" :fontSize="30" style="border-radius: 20rpx">提交</c-button>
		</div>
	</div>
</template>

<script>
import mixin from "@/mixin"
export default {
	mixins: [mixin],
	data() {
		return {}
	},

	components: {},

	computed: {},

	methods: {},
}
</script>
<style lang="scss">
page {
	background: $page-bg;
}
</style>
<style lang="scss" scoped>
.content {
	// padding: 30rpx;
	.tip {
		padding: 20rpx;
	}
	.inner {
		padding: 0 30rpx;
		background: #fff;
		.line {
			padding: 15rpx 5rpx 20rpx;
			font-size: 30rpx;
			color: #000;
			.lable {
				margin-right: 20rpx;
				min-width: 120rpx;
			}
			.code {
				padding: 6px 15rpx;
				color: #fff;
				font-size: 28rpx;
				background: $theme-color;
				border-radius: 40rpx;
				line-height: 1;
			}
		}
	}
	.btn {
		padding: 40rpx 110rpx;
	}
}
</style>
